<template>
  <div class="payment-method">
    <van-radio-group v-model="selected">
      <div v-for="item in payments" :key="item.value" class="payment-item" @click="onSelectPayment(item.value)">
        <div class="label">
          <div class="icon">
            <van-icon :name="item.icon" :color="item.color" size="24" />
          </div>
          <div class="text">{{ item.label }}</div>
        </div>

        <van-icon
          :name="selected === item.value ? 'checked' : 'circle'"
          :color="selected === item.value ? '#4586FF' : '#D7DFE8'"
          size="19"
        />
      </div>
    </van-radio-group>
  </div>
</template>

<script>
import Vue from 'vue'
import { RadioGroup, Radio, Icon } from 'vant'

Vue.use(Radio)
  .use(RadioGroup)
  .use(Icon)

const payments = [
  { value: 'wechat', color: '#09BB07', icon: 'wechat', label: '微信支付' },
  { value: 'alipay', color: '#03ACF5', icon: 'alipay', label: '支付宝支付' }
]

export default {
  data() {
    return {
      selected: '',
      payments
    }
  },

  methods: {
    onSelectPayment(e) {
      this.selected = e
      this.$emit('select', e)
    }
  }
}
</script>

<style lang="less" scoped>
.payment-method {
  padding: 0 17px;
  background-color: #ffffff;

  .payment-item {
    border-bottom: 0.5px solid #ebebeb;
    padding: 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &:last-child {
      border: none;
    }

    .label {
      display: flex;
      align-items: center;

      .icon {
        margin-right: 12px;
      }

      .text {
        font-size: 16px;
        color: #666666;
      }
    }
  }
}
</style>